import { useRef, useState, useLayoutEffect, createRef, RefObject, useEffect } from "react";

// function UseRefCom() {
//     //useRef创建引用,对元素进行持续引用,优化性能
//     let ipt = useRef<HTMLInputElement | null>(null)
//     //createRef变更的时候每次都会传入新的值,性能变低
//     let ipt2:RefObject<HTMLInputElement> = createRef()
//     useLayoutEffect(() => {
//         ipt.current!.focus()
//         ipt2.current!.value = '7777'
//     })
//     return (
//         <fieldset>
//             <legend>使用useRef钩子</legend>
//             <input type="text" ref={ipt} />
//             <input type="text" ref={ipt2} />
//         </fieldset>
//     )
// }

function Cal() {
    console.log('执行了');
    const [count, setCount] = useState(0)
    // const myRef = useRef<number>()
    const myRef:any = createRef()

    useEffect(() => {
        myRef.current = count
    })

    function handle() {
        setCount(count + 1)
    }
    function showAlert() {
        setTimeout(() => {
            alert('count:' + count + "" + "ref:" + myRef.current)
        },2000)
    }
    return (
        <fieldset>
            <legend>Cal</legend>
            <h1>count的值:{count}</h1>
            <button onClick={handle}>点击</button>
            <button onClick={showAlert}>来吧展示</button>
        </fieldset>
    )

}

// export default UseRefCom
export default Cal